<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="../public/assets/layui/css/layui.css" />
    <script src="../public/assets/layui/layui.js"></script>
    <style>
        body,html{
            height: 100%;
            background-color: gray;
        }
        .title{
            margin-bottom: 20px;
            text-align: center;
        }
        .main {
            width: 400px;
            margin: 100px auto;
            background-color: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        .lk{
            text-align: center;
        }
    </style>
  </head>
  <body>
    <div class="main">
      <h1 class="title">登录</h1>
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="account"
              required
              lay-verify="required"
              placeholder="请输入账号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
         <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="username"
              required
              lay-verify="required"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-block">
            <input
              type="password"
              name="password"
              required
              lay-verify="required"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
         <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input
              type="password"
              name="repassword"
              required
              lay-verify="required"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" />
            <input type="radio" name="sex" value="女" title="女" checked />
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
              立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </form>

      <div class="lk">
        <a href="admin-register.html">没有账号？立马注册！</a>
      </div>
    </div>

    <script>
      //Demo
      layui.use("form", function () {
        var form = layui.form;
        
        //监听提交
        form.on("submit(formDemo)", function (data) {
          layer.msg(JSON.stringify(data.field));
          return false;
        });
      });
    </script>
  </body>
</html>
